<template>
  <div class="page signManage">
    <div class="scroll-view">
      <customHeader middleTitle="签名管理" rightTitle="新增" @rightCallBack="showModal" />
      <messageComfirm
        rightText="确定"
        @leftCallBack="cancelSignName"
        @rightCallBack="submitSignName"
        :visible="modalVisible"
        :rightBtnDisabled="!signName"
      >
        <div class="update-sign-name">
          <div class="title">新增签名</div>
          <inputClear
            class="sign-name"
            v-model="signName"
            :maxlength="10"
            placeholder="请输入设备名称"
          />
          <span class="tip">签名将出现在短信内容中</span>
        </div>
      </messageComfirm>
      <div class="page-body">
        <ul class="form-style">
          <li v-for="(item,index) in list" :key="index" @click="ope(item.signId,item.status)">
            <span>{{item.sign}}</span>
            <div>
              <div class="btn" :class="{disabled:item.status==1}">{{item.status==2?"开启":"禁用"}}</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import { Toast, MessageBox } from "mint-ui";
import messageComfirm from "../../components/messageComfirm/messageComfirm";
import inputClear from "../../components/inputClear/inputClear";
import jsBridge from "../../tools/jsBridge.js";
export default {
  name: "signManage",
  data() {
    return {
      signName: "",
      modalVisible: false,
      list: [],
    };
  },
  methods: {
    showModal() {
      this.modalVisible = true;
    },
    cancelSignName() {
      this.modalVisible = false;
    },
    //开启或禁用
    ope(signId,status) {
      if (status == 1) {
        MessageBox.confirm('确定要禁用该签名吗？?').then(action => {
          if (action == "confirm") {
            this.changeStatus(signId,2);
          }
        });
      } else {
        this.changeStatus(signId,1);
      }
    },
    submitSignName() {
      if (!this.signName) {
        return;
      }
      const han = /^[\u4e00-\u9fa5]+$/;
      if (!han.test(this.signName)) {
        Toast("签名仅支持汉字，最多输入10个字符");
        return;
      }
       const params={sign:this.signName};
      this.ajax({
        url: "/newapp/smsmarketing/addSign.do",
        type: "post",
        data:params,
        controlLoading: true
      })
        .then(res => {
          this.modalVisible = false;
          this.signName = "";
          if (res.success) {
            this.getData();
          } else {
            Toast(res.msg);
          }
        })
        .catch(function (err) {
          this.modalVisible = false;
        });
    },
    changeStatus(signId,status) {
      const params={signId:signId,status:status};
      this.ajax({
        url: `/newapp/smsmarketing/setSignStatus.do`,
        type: "post",
        data:params,
        controlLoading: true
      })
        .then(res => {
          if (res.success) {
            Toast("操作成功");
            this.getData();
          } else {
            Toast(res.msg);
          }
        })
        .catch(function (err) {

        });
    },
    getData() {
      this.ajax({
        url: "/newapp/smsmarketing/querySignList.do",
        type: "get",
        controlLoading: false
      })
        .then(res => {
          if (res.success) {
            this.list = res.resultObject;
          } else {
            Toast(res.msg);
          }
        })
        .catch(function (err) {

        });
    },
  },
  computed: {

  },
  created() {
    this.getData();
  },

  components: {
    customHeader,
    messageComfirm,
    inputClear
  }
};
</script>
<style lang="scss" scoped>
@import "messageMarketing";
</style>